<template>
    <div class="con">
        <div class="wrapper">
            <h3 class="title">案件提交时间</h3>
            <el-date-picker v-model="caseDateRange" type="daterange" value-format="yyyy-MM-dd" unlink-panels
                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" @change="onDateChange">
            </el-date-picker>
        </div>

        <div class="chart-wrapper-h">
            <div class="chart-wrapper">
                <h3 class="title">案件基本类型统计</h3>
                <pie-chart :chart-data="pieChartData" />
            </div>

            <div class="chart-wrapper">
                <h3 class="title">XXX派出所民警提交统计</h3>
                <bar-chart :chart-data="barChartData" />
            </div>
        </div>

        <div class="chart-wrapper">
            <h3 class="title">案件类型趋势统计</h3>
            <line-chart :chart-data="lineChartData" />
        </div>
    </div>
</template>

<script>
import PieChart from './pieChart'
import LineChart from './lineChart'
import BarChart from './barChart'
import dayjs from 'dayjs'

export default {
    data() {
        return {
            caseDateRange: '',
            pieChartData: {
                legendData: ['刑事案件', '行政案件', '其它'],
                seriesData: [
                    {
                        name: '案件类型',
                        type: 'pie',
                        // roseType: 'radius',
                        // radius: [15, 95],
                        // center: ['50%', '38%'],
                        data: [{ value: 100, name: '刑事案件' }, { value: 150, name: '行政案件' }, { value: 200, name: '其它' }],
                        animationEasing: 'cubicInOut',
                        animationDuration: 2600
                    }
                ]
            },
            lineChartData: {
                legendData: ['刑事案件', '行政案件', '其它'],
                xAxisData: ['202303', '202304', '202305', '202306', '202307', '202308', '202309', '202310', '202311', '202312', '202401', '202402'],
                seriesData: [{
                    name: '刑事案件',
                    // itemStyle: {
                    //     color: '#FF005A',
                    //     lineStyle: {
                    //         color: '#FF005A',
                    //         width: 2
                    //     }
                    // },
                    smooth: true,
                    type: 'line',
                    data: [100, 120, 161, 134, 105, 160, 165, 91, 154, 162, 140, 145],
                    animationDuration: 2800,
                    animationEasing: 'cubicInOut'
                },
                {
                    name: '行政案件',
                    smooth: true,
                    type: 'line',
                    // itemStyle: {
                    //     color: '#3888fa',
                    //     lineStyle: {
                    //         color: '#3888fa',
                    //         width: 2
                    //     },
                    //     areaStyle: {
                    //         color: '#f3f8ff'
                    //     }
                    // },
                    data: [120, 82, 91, 154, 162, 140, 145, 100, 120, 161, 134, 105],
                    animationDuration: 2800,
                    animationEasing: 'quadraticOut'
                }, {
                    name: '其它',
                    smooth: true,
                    type: 'line',
                    // itemStyle: {
                    //     color: '#3888fa',
                    //     lineStyle: {
                    //         color: '#3888fa',
                    //         width: 2
                    //     },
                    //     areaStyle: {
                    //         color: '#f3f8ff'
                    //     }
                    // },
                    data: [100, 120, 161, 134, 105, 120, 82, 91, 154, 162, 140, 145],
                    animationDuration: 2800,
                    animationEasing: 'quadraticOut'
                }]
            },
            barChartData: {
                legendData: ['张三', '李四'],
                xData: ['202303', '202304', '202305', '202306', '202307', '202308', '202309', '202310', '202311', '202312', '202401', '202402'],
                ySeries: [{
                    name: '张三',
                    type: 'bar',
                    barWidth: '60%',
                    data: [79, 52, 200, 334, 390, 330, 220, 80, 52, 200, 334, 390],
                    animationDuration: 6000
                }, {
                    name: '李四',
                    type: 'bar',
                    barWidth: '60%',
                    data: [80, 52, 200, 334, 390, 330, 220, 79, 52, 200, 334, 390],
                    animationDuration: 6000
                }]
            }
        }
    },
    components: {
        PieChart,
        LineChart,
        BarChart
    },
    mounted() {
        const startDate = dayjs().subtract(1, 'year').format('YYYY-MM-DD')
        const endDate = dayjs().format('YYYY-MM-DD')
        this.caseDateRange = [startDate, endDate]
    },
    methods: {
        onDateChange(e) {
            console.log(e)
        }
    }
}
</script>
  
<style lang="scss" scoped>
.wrapper {
    display: flex;
    align-items: center;

    .title {
        margin-right: 20px;
    }
}

.chart-wrapper-h {
    display: flex;
}

.chart-wrapper {
    width: 100%;

    .title {
        margin-bottom: 20px;
    }
}
</style>
  